<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>桂妈圈 - 多元化Logo设计方案</title>
        <style>
            body {
                font-family: 'Microsoft YaHei', sans-serif;
                background-color: #f9f9f9;
                margin: 0;
                padding: 30px;
                color: #333;
            }
            h1 {
                text-align: center;
                color: #ff9fb5;
                margin-bottom: 40px;
                font-weight: 300;
                font-size: 36px;
            }
            .logo-gallery {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
                gap: 40px;
                margin-bottom: 60px;
            }
            .logo-item {
                background-color: white;
                border-radius: 12px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
                padding: 30px;
                text-align: center;
                transition: all 0.3s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .logo-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
            }
            .logo-title {
                margin-top: 25px;
                font-size: 20px;
                color: #333;
                font-weight: 500;
            }
            .logo-desc {
                color: #666;
                font-size: 16px;
                margin-top: 10px;
                line-height: 1.5;
                max-width: 350px;
            }
            .download-btn {
                margin-top: 25px;
                padding: 12px 24px;
                background-color: #ff9fb5;
                color: white;
                border: none;
                border-radius: 30px;
                cursor: pointer;
                font-size: 16px;
                transition: all 0.3s ease;
                font-weight: 500;
                letter-spacing: 0.5px;
            }
            .download-btn:hover {
                background-color: #ff8ca7;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(255, 159, 181, 0.3);
            }
            .controls {
                text-align: center;
                margin-top: 40px;
            }
            .all-download-btn {
                padding: 15px 40px;
                background-color: #333;
                color: white;
                border: none;
                border-radius: 30px;
                cursor: pointer;
                font-size: 18px;
                transition: all 0.3s ease;
                font-weight: 500;
            }
            .all-download-btn:hover {
                background-color: #222;
                transform: translateY(-2px);
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            }
        </style>
    </head>
    <body>
        <h1>桂妈圈 - 多元化Logo设计方案</h1>

        <div class="logo-gallery">
            <!-- Logo 1: 桂花环绕 -->
            <div class="logo-item">
                <svg width="400" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="flowerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#FF9FB5" stop-opacity="1" />
                            <stop offset="100%" stop-color="#FF9FB5" stop-opacity="0.6" />
                        </linearGradient>
                    </defs>

                    <!-- 桂花环绕设计 -->
                    <g transform="translate(150, 200)">
                        <!-- 中心圆形 -->
                        <circle cx="0" cy="0" r="70" fill="white" stroke="#FF9FB5" stroke-width="3" />

                        <!-- 桂花图案 -->
                        <g transform="rotate(0)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(45)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(90)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(135)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(180)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(225)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(270)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>
                        <g transform="rotate(315)">
                            <path
                                d="M0,-90 C10,-80 20,-90 20,-70 C20,-50 0,-60 -20,-70 C-20,-90 -10,-80 0,-90"
                                fill="#FFD700"
                                opacity="0.7"
                            />
                        </g>

                        <!-- 母子图形 -->
                        <circle cx="-20" cy="-10" r="20" fill="url(#flowerGradient)" />
                        <circle cx="20" cy="10" r="15" fill="#7FDBBD" opacity="0.8" />
                        <path
                            d="M-10,-10 C0,0 10,0 20,10"
                            fill="none"
                            stroke="#FFF"
                            stroke-width="3"
                            stroke-linecap="round"
                        />
                    </g>

                    <!-- 品牌名称 -->
                    <text
                        x="400"
                        y="180"
                        font-size="60"
                        font-weight="500"
                        text-anchor="start"
                        fill="#333333"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂妈圈
                    </text>
                    <text
                        x="400"
                        y="230"
                        font-size="20"
                        font-weight="300"
                        text-anchor="start"
                        fill="#666666"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂花环绕的温暖
                    </text>
                </svg>
                <div class="logo-title">桂花环绕</div>
                <div class="logo-desc">
                    以桂花为主要元素，环绕设计象征保护与关爱，金色桂花与粉色调和谐搭配，展现广西特色。
                </div>
                <button class="download-btn" onclick="downloadSVG(0)">下载 Logo</button>
            </div>

            <!-- Logo 2: 双手呵护 -->
            <div class="logo-item">
                <svg width="400" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- 双手呵护设计 -->
                    <g transform="translate(150, 200)">
                        <!-- 左手 -->
                        <path
                            d="M-80,-20 C-60,-60 -20,-80 0,-40 C-10,-50 -30,-40 -40,-20 C-50,0 -70,20 -80,-20 Z"
                            fill="#FF9FB5"
                            opacity="0.8"
                            stroke="#FF9FB5"
                            stroke-width="2"
                        />

                        <!-- 右手 -->
                        <path
                            d="M80,-20 C60,-60 20,-80 0,-40 C10,-50 30,-40 40,-20 C50,0 70,20 80,-20 Z"
                            fill="#7FDBBD"
                            opacity="0.8"
                            stroke="#7FDBBD"
                            stroke-width="2"
                        />

                        <!-- 中心圆 - 象征孩子 -->
                        <circle cx="0" cy="0" r="30" fill="white" stroke="#FF9FB5" stroke-width="3" />

                        <!-- 内部图案 - 抽象母子 -->
                        <path
                            d="M-10,0 C-5,-15 5,-15 10,0 M0,-10 L0,15 M-10,0 C-15,15 -5,20 0,15 C5,20 15,15 10,0"
                            fill="none"
                            stroke="#FF9FB5"
                            stroke-width="3"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />

                        <!-- 装饰元素 -->
                        <circle cx="-50" cy="-30" r="5" fill="#FFD700" opacity="0.8" />
                        <circle cx="50" cy="-30" r="5" fill="#FFD700" opacity="0.8" />
                        <circle cx="0" cy="50" r="5" fill="#FFD700" opacity="0.8" />
                    </g>

                    <!-- 品牌名称 -->
                    <text
                        x="400"
                        y="180"
                        font-size="60"
                        font-weight="500"
                        text-anchor="start"
                        fill="#333333"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂妈圈
                    </text>
                    <text
                        x="400"
                        y="230"
                        font-size="20"
                        font-weight="300"
                        text-anchor="start"
                        fill="#666666"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        双手呵护的关爱
                    </text>
                </svg>
                <div class="logo-title">双手呵护</div>
                <div class="logo-desc">
                    双手呵护设计，象征母亲的保护与关爱，粉色与薄荷绿的双手环抱，传递温暖与安全感。
                </div>
                <button class="download-btn" onclick="downloadSVG(1)">下载 Logo</button>
            </div>

            <!-- Logo 3: 山水意境 -->
            <div class="logo-item">
                <svg width="400" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- 山水意境设计 -->
                    <g transform="translate(150, 200)">
                        <!-- 背景山形 -->
                        <path
                            d="M-100,-40 L-70,-70 L-40,-30 L0,-80 L40,-20 L70,-60 L100,-30 L100,80 L-100,80 Z"
                            fill="#7FDBBD"
                            opacity="0.2"
                            stroke="#7FDBBD"
                            stroke-width="2"
                        />

                        <!-- 水面 -->
                        <path
                            d="M-100,30 C-70,20 -40,40 0,20 C40,0 70,20 100,10 L100,80 L-100,80 Z"
                            fill="#7FDBBD"
                            opacity="0.3"
                        />

                        <!-- 太阳/月亮 -->
                        <circle cx="50" cy="-40" r="20" fill="#FF9FB5" opacity="0.8" />

                        <!-- 母子剪影 -->
                        <path
                            d="M-30,20 C-20,-10 20,-10 30,20 M0,-10 L0,40 M-30,20 C-40,40 -20,60 0,40 C20,60 40,40 30,20"
                            fill="#333"
                            stroke="#333"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />

                        <!-- 小船 -->
                        <path
                            d="M-60,50 C-40,40 -20,50 0,40 C20,30 40,40 60,30"
                            fill="none"
                            stroke="#333"
                            stroke-width="2"
                            stroke-linecap="round"
                        />
                    </g>

                    <!-- 品牌名称 -->
                    <text
                        x="400"
                        y="180"
                        font-size="60"
                        font-weight="500"
                        text-anchor="start"
                        fill="#333333"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂妈圈
                    </text>
                    <text
                        x="400"
                        y="230"
                        font-size="20"
                        font-weight="300"
                        text-anchor="start"
                        fill="#666666"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        山水间的母爱
                    </text>
                </svg>
                <div class="logo-title">山水意境</div>
                <div class="logo-desc">
                    融入桂林山水元素，以东方水墨画风格呈现，山峦与水面构成和谐画面，象征广西自然之美与母爱的包容。
                </div>
                <button class="download-btn" onclick="downloadSVG(2)">下载 Logo</button>
            </div>

            <!-- Logo 4: 壮锦图腾 -->
            <div class="logo-item">
                <svg width="400" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- 壮锦图腾设计 -->
                    <g transform="translate(150, 200)">
                        <!-- 壮锦几何框架 -->
                        <rect
                            x="-80"
                            y="-80"
                            width="160"
                            height="160"
                            rx="15"
                            ry="15"
                            fill="none"
                            stroke="#FF9FB5"
                            stroke-width="4"
                        />

                        <!-- 壮锦图案 -->
                        <path
                            d="M-60,-60 L-40,-60 L-40,-40 L-60,-40 Z M-20,-60 L0,-60 L0,-40 L-20,-40 Z M20,-60 L40,-60 L40,-40 L20,-40 Z M60,-60 L80,-60 L80,-40 L60,-40 Z"
                            fill="#7FDBBD"
                        />
                        <path
                            d="M-60,-20 L-40,-20 L-40,0 L-60,0 Z M-20,-20 L0,-20 L0,0 L-20,0 Z M20,-20 L40,-20 L40,0 L20,0 Z M60,-20 L80,-20 L80,0 L60,0 Z"
                            fill="#FF9FB5"
                        />
                        <path
                            d="M-60,20 L-40,20 L-40,40 L-60,40 Z M-20,20 L0,20 L0,40 L-20,40 Z M20,20 L40,20 L40,40 L20,40 Z M60,20 L80,20 L80,40 L60,40 Z"
                            fill="#7FDBBD"
                        />
                        <path
                            d="M-60,60 L-40,60 L-40,80 L-60,80 Z M-20,60 L0,60 L0,80 L-20,80 Z M20,60 L40,60 L40,80 L20,80 Z M60,60 L80,60 L80,80 L60,80 Z"
                            fill="#FF9FB5"
                        />

                        <!-- 中心图案 - 抽象母子 -->
                        <circle cx="-10" cy="-10" r="15" fill="white" />
                        <circle cx="20" cy="20" r="10" fill="white" />
                        <path
                            d="M-5,-5 C0,5 10,10 20,20"
                            fill="none"
                            stroke="white"
                            stroke-width="3"
                            stroke-linecap="round"
                        />
                    </g>

                    <!-- 品牌名称 -->
                    <text
                        x="400"
                        y="180"
                        font-size="60"
                        font-weight="500"
                        text-anchor="start"
                        fill="#333333"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂妈圈
                    </text>
                    <text
                        x="400"
                        y="230"
                        font-size="20"
                        font-weight="300"
                        text-anchor="start"
                        fill="#666666"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        壮锦文化的温度
                    </text>
                </svg>
                <div class="logo-title">壮锦图腾</div>
                <div class="logo-desc">
                    以广西壮族传统壮锦图案为基础，几何图形排列整齐，色彩鲜明，展现民族特色与文化底蕴。
                </div>
                <button class="download-btn" onclick="downloadSVG(3)">下载 Logo</button>
            </div>

            <!-- Logo 5: 流线飘带 -->
            <div class="logo-item">
                <svg width="400" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="ribbonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#FF9FB5" stop-opacity="1" />
                            <stop offset="100%" stop-color="#7FDBBD" stop-opacity="1" />
                        </linearGradient>
                    </defs>

                    <!-- 流线飘带设计 -->
                    <g transform="translate(150, 200)">
                        <!-- 飘带元素 -->
                        <path
                            d="M-80,-60 C-40,-90 40,-90 80,-60 C40,-30 -40,-30 -80,-60 Z"
                            fill="url(#ribbonGradient)"
                            opacity="0.8"
                        />
                        <path
                            d="M-80,0 C-40,-30 40,-30 80,0 C40,30 -40,30 -80,0 Z"
                            fill="url(#ribbonGradient)"
                            opacity="0.6"
                        />
                        <path
                            d="M-80,60 C-40,30 40,30 80,60 C40,90 -40,90 -80,60 Z"
                            fill="url(#ribbonGradient)"
                            opacity="0.4"
                        />

                        <!-- 中心元素 - 抽象母子 -->
                        <circle cx="0" cy="0" r="25" fill="white" stroke="#FF9FB5" stroke-width="2" />
                        <path
                            d="M-10,0 C-5,-10 5,-10 10,0 M0,-5 L0,10 M-10,0 C-15,10 -5,15 0,10 C5,15 15,10 10,0"
                            fill="none"
                            stroke="#FF9FB5"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </g>

                    <!-- 品牌名称 -->
                    <text
                        x="400"
                        y="180"
                        font-size="60"
                        font-weight="500"
                        text-anchor="start"
                        fill="#333333"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂妈圈
                    </text>
                    <text
                        x="400"
                        y="230"
                        font-size="20"
                        font-weight="300"
                        text-anchor="start"
                        fill="#666666"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        如丝带般的温柔
                    </text>
                </svg>
                <div class="logo-title">流线飘带</div>
                <div class="logo-desc">
                    流线型飘带设计，如丝带般柔美流动，渐变色彩从粉色到薄荷绿，象征母爱的柔软与包容。
                </div>
                <button class="download-btn" onclick="downloadSVG(4)">下载 Logo</button>
            </div>

            <!-- Logo 6: 现代几何 -->
            <div class="logo-item">
                <svg width="400" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- 现代几何设计 -->
                    <g transform="translate(150, 200)">
                        <!-- 几何背景 -->
                        <rect x="-90" y="-90" width="180" height="180" rx="30" ry="30" fill="#F5F5F5" />

                        <!-- 几何元素组合 -->
                        <circle cx="-30" cy="-30" r="30" fill="#FF9FB5" opacity="0.8" />
                        <circle cx="30" cy="30" r="30" fill="#7FDBBD" opacity="0.8" />
                        <rect x="-15" y="-15" width="30" height="30" rx="5" ry="5" fill="white" />

                        <!-- 连接线 -->
                        <path d="M-15,0 L15,0 M0,-15 L0,15" stroke="white" stroke-width="3" stroke-linecap="round" />

                        <!-- 装饰点 -->
                        <circle cx="-60" cy="60" r="10" fill="#FF9FB5" opacity="0.5" />
                        <circle cx="60" cy="-60" r="10" fill="#7FDBBD" opacity="0.5" />
                    </g>

                    <!-- 品牌名称 -->
                    <text
                        x="400"
                        y="180"
                        font-size="60"
                        font-weight="500"
                        text-anchor="start"
                        fill="#333333"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        桂妈圈
                    </text>
                    <text
                        x="400"
                        y="230"
                        font-size="20"
                        font-weight="300"
                        text-anchor="start"
                        fill="#666666"
                        font-family="'Microsoft YaHei', sans-serif"
                    >
                        现代简约的温度
                    </text>
                </svg>
                <div class="logo-title">现代几何</div>
                <div class="logo-desc">
                    现代几何风格，简洁利落的图形组合，圆形与方形的交融，象征不同个体的和谐相处，适合年轻妈妈群体。
                </div>
                <button class="download-btn" onclick="downloadSVG(5)">下载 Logo</button>
            </div>
        </div>

        <div class="controls">
            <button class="all-download-btn" onclick="downloadAllSVGs()">下载所有Logo设计</button>
        </div>

        <script>
            function downloadSVG(index) {
                const svg = document.querySelectorAll('svg')[index];
                const serializer = new XMLSerializer();
                let source = serializer.serializeToString(svg);

                // 添加XML声明
                source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

                // 将SVG转换为Blob
                const svgBlob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
                const svgUrl = URL.createObjectURL(svgBlob);

                // 创建下载链接
                const downloadLink = document.createElement('a');
                downloadLink.href = svgUrl;
                const titles = ['桂花环绕', '双手呵护', '山水意境', '壮锦图腾', '流线飘带', '现代几何'];
                downloadLink.download = `桂妈圈_${titles[index]}.svg`;
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }

            function downloadAllSVGs() {
                for (let i = 0; i < 6; i++) {
                    setTimeout(() => {
                        downloadSVG(i);
                    }, i * 500);
                }
            }
        </script>
    </body>
</html>
